import React, { useState, useEffect, useRef, useMemo } from 'react';
// import './SpeechToText.css'; // 引入样式文件（需自行创建）

const SpeechToText = () => {
    // 状态管理 ======================================================
    const [isListening, setIsListening] = useState(false); // 麦克风监听状态
    const [transcript, setTranscript] = useState(''); // 语音识别文字结果
    const [isBrowserSupported, setIsBrowserSupported] = useState(true); // 浏览器支持检测
    const [error, setError] = useState(null); // 错误信息存储
    const recognitionRef = useRef(null); // 语音识别器实例引用（保持持久化）

    // 语音识别初始化 ================================================
    useEffect(() => {
        // 检测浏览器兼容性
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

        if (!SpeechRecognition) {
            setIsBrowserSupported(false);
            setError('您的浏览器不支持语音识别功能');
            return;
        }

        // 创建语音识别实例
        const recognition = new SpeechRecognition();
        recognition.continuous = true; // 持续监听模式（直到手动停止）
        recognition.interimResults = true; // 获取临时识别结果（实时反馈）
        recognition.lang = 'zh-CN'; // 设置识别语言为简体中文

        // 语音识别结果处理 ============================================
        recognition.onresult = (event) => {
            let interimTranscript = ''; // 临时识别结果（未确认）
            let finalTranscript = '';   // 最终确认结果

            // 遍历所有语音识别结果
            for (let i = event.resultIndex; i < event.results.length; i++) {
                const transcript = event.results[i].transcript;

                // 结果分为最终结果（isFinal）和临时结果
                if (event.results[i].isFinal) {
                    finalTranscript += transcript + ' '; // 追加最终结果
                } else {
                    interimTranscript += transcript; // 临时结果（未显示）
                }
            }

            // 仅更新最终确认结果（避免界面频繁刷新）
            setTranscript(prev => prev + finalTranscript);
        };

        // 错误处理 ===================================================
        recognition.onerror = (event) => {
            console.error('语音识别错误:', event.error);
            setError(`识别错误: ${event.error}`); // 展示友好错误提示
            setIsListening(false); // 强制停止监听状态
        };

        // 识别结束处理 ================================================
        recognition.onend = () => {
            // 如果仍在监听状态，自动重启识别（实现持续监听）
            if (isListening) {
                recognition.start();
            }
        };

        // 保存识别器实例引用
        recognitionRef.current = recognition;

        // 清理函数（组件卸载时执行）===================================
        return () => {
            if (recognitionRef.current) {
                recognitionRef.current.stop(); // 确保停止语音识别
            }
        };
    }, []); // 空依赖数组表示只在组件挂载时运行一次

    // 操作处理函数 ==================================================
    const toggleListening = async () => {
        setError(null); // 重置错误状态

        if (!isBrowserSupported) return; // 提前终止不支持的浏览器

        if (isListening) {
            // 停止监听 =================================================
            recognitionRef.current.stop();
            setIsListening(false);
        } else {
            try {
                // 安全上下文检查 =========================================
                if (!window.isSecureContext) {
                    throw new Error('语音识别需要在HTTPS或localhos环境t下运行');
                }

                // 请求麦克风权限 =========================================
                await navigator.mediaDevices.getUserMedia({ audio: true });

                // 开始新的识别会话 =======================================
                setTranscript(''); // 清空历史文本
                recognitionRef.current.start(); // 启动语音识别
                setIsListening(true); // 更新状态
            } catch (err) {
                console.error('启动语音识别失败:', err);
                setError(`无法启动语音识别: ${err.message}`);
                setIsListening(false);
            }
        }
    };

    // 清除文本 ======================================================
    const clearTranscript = () => {
        setTranscript(''); // 重置识别结果
        setError(null);    // 清除错误信息
    };

    // 浏览器不支持时的渲染 ==========================================
    if (!isBrowserSupported) {
        return (
            <div className="unsupported-browser">
                <p>抱歉，您的浏览器不支持语音识别功能。</p>
                <p>请尝试使用最新版本的Chrome、Edge或Safari浏览器。</p>
            </div>
        );
    }

    // 主界面渲染 ====================================================
    return (
        <div className="speech-to-text-container">
            <h2>语音实时转文字</h2>

            {/* 识别结果显示区域 */}
            <div className="transcript-box">
                {transcript || <span className="placeholder">点击"开始录音"按钮开始语音转文字...</span>}
            </div>

            {/* 错误信息提示 */}
            {error && <div className="error-message">{error}</div>}

            {/* 操作按钮组 */}
            <div className="button-group">
                <button
                    onClick={toggleListening}
                    className={isListening ? 'listening' : ''}
                    aria-label={isListening ? '停止录音' : '开始录音'}
                >
                    {isListening ? '停止录音' : '开始录音'}
                </button>

                <button
                    onClick={clearTranscript}
                    disabled={!transcript && !error}
                    aria-label="清除内容"
                >
                    清除内容
                </button>
            </div>

            {/* 监听状态指示器 */}
            {isListening && (
                <div className="status-indicator">
                    <div className="pulse-animation"></div>
                    <span>正在聆听中...</span>
                </div>
            )}
        </div>
    );
};

export default SpeechToText;
